<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>面板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="stylesheet" href="/static/public/libs/layui-v2.5.6/layui/css/layui.css">
    <link href="/static/public/libs/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/admin/static/css/main.css" rel="stylesheet"/>
    <link href="/static/admin/pages/dashboard/css/dashboard.css" rel="stylesheet"/>
</head>
<body class="layui-layout-body">
<div class="p-container">
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="p-card-left">文章</div>
                    <div class="p-card-right"><i class="layui-icon layui-icon-read" style="color: #00c292"></i></div>
                </div>
                <div class="layui-card-body">
                    <div class="p-card-num">#(articleCount) <span
                            class="p-card-num-text">篇</span></div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="p-card-left">评论</div>
                    <div class="p-card-right"><i class="layui-icon layui-icon-dialogue" style="color: #ab8ce4"></i></div>
                </div>
                <div class="layui-card-body">
                    <div class="p-card-num">#(commentCount) <span
                            class="p-card-num-text">条</span></div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="p-card-left">标签</div>
                    <div class="p-card-right"><i class="layui-icon layui-icon-note" style="color: #03a9f3"></i></div>
                </div>
                <div class="layui-card-body">
                    <div class="p-card-num">#(tagCount) <span class="p-card-num-text">个</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="p-card-left">用户</div>
                    <div class="p-card-right"><i class="layui-icon layui-icon-username" style="color: #fb9678"></i></div>
                </div>
                <div class="layui-card-body">
                    <div class="p-card-num">#(userCount) <span class="p-card-num-text">个</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs12 layui-col-sm12 layui-col-md6" style="margin-top: 5px">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="p-card-left">最新文章</div>
                </div>
                <div class="layui-card-body" style="min-height: 570px" id="articlePanel">
                    加载中...
                </div>
            </div>
        </div>


        <div class="layui-col-xs12 layui-col-sm12 layui-col-md6" style="margin-top: 5px">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="p-card-left">最新评论</div>
                </div>
                <div class="layui-card-body" style="min-height: 570px;" id="commentPanel">
                    加载中...
                </div>
            </div>
        </div>
    </div>

    <div class="p-footer">
        由<a href="http://www.perfree.org" target="_blank">Perfree</a>提供支持,当前版本V#(version)
    </div>
</div>
<script src="/static/public/libs/jquery/jquery-3.5.1.min.js"></script>
<script src="/static/public/libs/layui-v2.5.6/layui/layui.all.js"></script>
<script>
    let util, layer;
    layui.use(['util', 'layer'], function () {
        util = layui.util;
        layer = layui.layer;
    });
    // 加载最新文章
    $.get("/admin/dashboard/getArticleList", function (res) {
        if (res.code === 200) {
            let html = "<ul>";
            res.data.forEach(d => {
                html += '<li class="p-cart-li">\n' +
                    '    <span class="p-card-article-time">' + util.toDateString(d.createTime, "yyyy-MM-dd") + '</span>\n' +
                    '    <a class="p-card-article-title" href="' + d.url + '" target="_blank">' + d.title + '</a>\n' +
                    '</li>'
            });

            if (res.data === null || res.data.length <= 0) {
                html = "暂无内容";
            } else {
                html += "</ul>";
            }
            $("#articlePanel").html(html);
        } else {
            layer.msg("加载最新文章失败", {icon: 2});
        }
    });

    // 加载最新评论
    $.get("/admin/dashboard/getCommentList", function (res) {
        if (res.code === 200) {
            let html = "<ul>";
            res.data.forEach(d => {
                html += '<li class="p-cart-li">\n' +
                    '    <span class="p-card-comment-time">' + util.toDateString(d.createTime, "yyyy-MM-dd") + '</span>\n' +
                    '    <a class="p-card-comment-user">' + d.userName + ':</a>\n' +
                    '    <span class="p-card-comment-title">' + d.content + '</span>\n' +
                    '</li>'
            });

            if (res.data === null || res.data.length <= 0) {
                html = "暂无内容";
            } else {
                html += "</ul>";
            }
            $("#commentPanel").html(html);
        } else {
            layer.msg("加载最新评论失败", {icon: 2});
        }

    });

</script>
</body>
</html>